import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import React, { useEffect, useState } from 'react';

import { ThemeProvider } from "@material-tailwind/react";
// import VConsole from 'vconsole';
import Loading from '@/components/Loading'

import '../../i18n'

function App({ Component, pageProps }: any) {
    const Layout = Component.layout || (({ children }: { children: any }) => <>{children}</>);



    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true)
        if (process.browser) {
            const VConsole = require('vconsole');
            new VConsole();
        }
    }, [])

    if (!loading) {
        return <Loading />;
    }
    return (
        // <ThemeProvider>
        <Layout>
            <Component {...pageProps} />
        </Layout>
        // </ThemeProvider>
    )
}


export default App